<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./logo.png">

    <!-- 本地最新 -->
    <!-- <script src="./dist/wscode.js"></script> -->

    <!-- CDN最新 -->
    <script src="https://cdn.jsdelivr.net/npm/wscode"></script>

    <title>Web Studio Code</title>

    <style>
        body {
            margin: 0;
        }

        div#wscode {
            width: 100vw;
            height: 100vh;
        }

        .github {
            position: fixed;
            transform: rotate(45deg);
            top: 60px;
            line-height: 1.6em;
            right: -60px;
            background-color: #9e9695;
            outline: 4px solid #9e9695;
            transform-origin: 150px 23px;
            border: 2px dashed #faf6f5;
            width: 300px;
            text-align: center;
            color: #f7f3f2;
            z-index: 2;
            font-family: sans-serif;
            text-decoration: none;
        }
    </style>

</head>

<body>

    <a href="https://github.com/yelloxing/Web-Studio-Code" class='github' target="_blank">Fork me on Github</a>

    <div id="wscode"></div>

    <script>
        window.wscode = new WSCode({

            // 编辑器挂载点
            el: document.getElementById('wscode'),

            // 设置字体
            "font-family": "serif",

            // 设置字重
            "font-weight": 800,

            // 设置tab代表多少空格
            tabSpace: 2,

            // 着色器
            // shader:function(textString){
            //     debugger
            // },

            // 初始化文本
            content: "<html lang=\"zh-cn\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Example | Web Studio Code</title>\n    <style>\n        /*css样式*/\n        body {\n            margin: 0px;\n        }\n    </style>\n</head>\n<body>\n    <script>\n\n        /*js代码*/\n        function doit() {\n            console.log('你好，世界！');\n        }\n\n    \</script\>\n</body>\n</html>\n\n<!-- Developed by 心叶（yelloxing@gmail.com） -->"
        });

        console.log(wscode);

        wscode.updated(function(){
            console.log('数据更新了'+new Date());
        });

        function doFormat(){
            wscode.format();
        }
    </script>

</body>

</html>